<template>
<div>

	<myheader  />

	<h1>课程修改页面</h1>

	<Reply :data="mydata"   />


		<van-cell-group>

<<<<<<< HEAD
=======

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		<van-field label="课程标题" v-model="title" />

		<van-field label="课程描述" v-model="desc" rows="5" type="textarea" />

	
		<van-field v-show="show_course"  v-for="(item,index) in params" :label="item.label" :key="index" v-model="info[item.key]" />

		<van-field v-show="show_cate"  v-for="(value,key,index) in params_cate" :label="value" :key="key" v-model="info_cate[key]" />
			

<<<<<<< HEAD
		<van-field v-model="price" label='价格' /> 

       状态:
            <van-radio-group v-model="state" direction="horizontal">
                <van-radio :name='1'>上架</van-radio>
                <van-radio :name='0'>下架</van-radio>
            </van-radio-group>

		<van-uploader  v-show="cid"  :after-read="afterRead" />
		
		<div v-for='i,j in videoSrc'>
				<input type="checkbox" :value='i' v-model="delvideo_list">
				<video :src="upload_dir+uid+'/'+i" controls="controls" width="200px" height="200px" autoplay='autoplay' v-show='cid'></video>
				<van-button @click="update_video(i)">修改视频</van-button>
				<van-button @click="delvideo(j)">删除视频</van-button>
				<van-uploader :after-read="afterRead" v-if='videoshow === i'></van-uploader>
			</div>

		<van-button color='purple' @click="delvideolist">确定批量删除</van-button>
		<!-- <span v-for="item,index in videos"> -->

		<!-- <video  width="300" height="200" :src="item" controls="controls" autoplay="autoplay"  muted ></video> -->

		<!-- </span> -->


		<van-button color="gray" @click="editcourse()">保存课程</van-button>

=======
		<span v-for="item,index in videos">

		<video  width="300" height="200" :src="upload_dir+uid+'/'+item" controls="controls" autoplay="autoplay"  muted >

		</video>

		<van-button color="red" @click="delvideo(index)">删除视频</van-button>


		<input type="radio" :value="index" v-model="picked" />

		<input type="checkbox" v-model="checklist" :value="item" >

		<van-uploader  :after-read="afterRead" />

		</span>

		<br />
		<van-button color="gray" @click="editcourse()">保存课程</van-button>


		<van-button color="purple" @click="delitems">批量删除</van-button>

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
	</van-cell-group>



</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';
import Reply from './Reply.vue';
import bus from './bus.js';


export default{

	//声明组件
	components:{

		'myheader':myheader,
		'Reply':Reply,
		
	},
	//构造方法
	created() {  

		//监听
		bus.$on('msg',target => {


			console.log(target);

			this.fid = target;

				//点选后获取分类id
				this.get_cate(this.fid);





		});


}, 
	//声明变量
	data(){

		return {

			//数据
			mydata:{},
			//课程分类id
			fid:0,
			title:"",
			desc:"",
			cid:0,
			videos:[],
			videosrc:"",
<<<<<<< HEAD
			videoSrc:[],
			price:'',
            state:0,
=======
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
			//课程参数列表
			params:[],
			//字典容器，动态生成容器
			info:{},
			//课程分类单独容器
			params_cate:{},
			info_cate:{},
			//展示标识
			show_course:true,
			show_cate:false,
<<<<<<< HEAD
			uid:localStorage.getItem('id'),
			videoshow:'',
			//批量删除列表
			delvideo_list:[],
=======
			uid:localStorage.getItem("id"),
			//选择视频 单选
			picked:"",
			//多选容器
			checklist:[]



>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		}


	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				value = value.slice(0,3);

				return value + "********";


			}

	},
	//初始化方法
	mounted(){

		//获取课程id
		this.cid = this.$route.query.fid;

		console.log(this.cid);

		localStorage.setItem("cid",this.cid);


		this.get_data();

		//获取课程分类参数

		this.get_cate(localStorage.getItem("cateid"));

		console.log(this.params);


		
	},
	//声明方法
	methods:{
<<<<<<< HEAD
		//重写remove方法,根据value删除
		myremove:function(val){
			//拿到删除目标的下标,indexOf和python中的find方法一样,返回下标
			var index = this.videoSrc.indexOf(val);
			//如果没有,回返回-1
			if (index > -1){
				//删除操作
				this.videoSrc.splice(index,1)
			}
		},
		//批量删除
		delvideolist:function(){
			console.log(this.delvideo_list);
			//转换数据类型
			var videolist = JSON.stringify(this.delvideo_list);
			console.log(videolist);
			this.axios.delete(this.localhost+'delvideos/',{
					params:{
						id:localStorage.getItem('cid'),
						uid:localStorage.getItem('id'),
						videolist:videolist
					}
				})
				.then(res=>{
					if (res.data.code == 200){
						//根据value做批量删除
						for (var x = 0;x < this.delvideo_list.length;x++){
							this.myremove(this.delvideo_list[x]);
							console.log(this.delvideo_list[x]);
						}
						this.$toast.success('视频删除成功!')
					}else{
						this.$toast.fail('批量删除失败~')
					}
				})
		},
		//删除视频
		delvideo:function(index){
			var res = confirm('您确定删除吗?')
			if (res === true){
				console.log('执行删除');
				this.axios.delete(this.localhost+'delvideo/',{
					params:{
						id:localStorage.getItem('cid'),
						uid:localStorage.getItem('id'),
						videoindex:index
					}
				})
				.then(res=>{
					if (res.data.code == 200){
						this.$toast.success('视频删除成功!')
						this.videoSrc.splice(index,1)
					}
				})
			}
		},
		//修改视频
		update_video:function(id){
			console.log(id);
			this.videoshow = id
			window.video_name = id
			
		},

=======

		//根据value进行删除
		myremove:function(val){


			// 拿到删除目标的下标
			var index = this.videos.indexOf(val);

			if(index > -1){

				//删除操作
				this.videos.splice(index,1);

			}


		},
		//批量删除视频
		delitems:function(){

			// 获取用户选择的视频
			console.log(this.checklist);

			//转换数据类型
			var videolist = JSON.stringify(this.checklist);

			console.log(videolist);


			//发送请求
			this.axios.delete(
				'http://localhost:5000/delvideos/',{params:{"id":localStorage.getItem("cid"),"uid":localStorage.getItem("id"),"videolist":videolist}}).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('视频删除成功');

						//根据value做批量删除
						for (var i = 0; i < this.checklist.length; i++) {
								
								this.myremove(this.checklist[i]);

						}

					}else{
						this.$toast.fail(result.data.msg);
					}

			});


		},
		//删除视频
		delvideo:function(index){


			var res = confirm("您确定删除吗？");

			if(res === true){

				console.log("执行删除");

				//发送请求
			this.axios.delete(
				'http://localhost:5000/delvideo/',{params:{"id":localStorage.getItem("cid"),"uid":localStorage.getItem("id"),"index":index}}).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('视频删除成功');

						this.videos.splice(index,1);


					}else{
						this.$toast.fail(result.data.msg);
					}

			});

			}

		},
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		//上传视频
		afterRead:function(file){


			//声明表单
				let data = new FormData();

				data.append("file",file.file);
<<<<<<< HEAD
				data.append("id",localStorage.getItem("id"));
				data.append("cid",this.cid);
				data.append("type",1);
				if(this.videoshow){	
					data.append('video_one',window.video_name)
				}
=======
				data.append("uid",localStorage.getItem("id"));
				data.append("id",this.cid);
				data.append("index",this.picked);
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

				//创建文件上传实例
				const myaxios = this.axios.create({withCredentials:false});

				myaxios({

					method:"post",
<<<<<<< HEAD
					url:"http://localhost:5000/upload/",
=======
					url:"http://localhost:5000/updatevideo/",
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
					data:data

				}).then(result => {

					console.log(result);
<<<<<<< HEAD
					if (result.data.code == 200){
						this.get_data();
						this.get_cate(localStorage.getItem("cateid"));
					}

					//将视频地址赋值
					this.videosrc = "http://localhost:5000/static/upload/"+localStorage.getItem("id")+"/"+result.data.filename;
					//累加填充
					this.videos.push(this.videosrc);
=======


					this.videos[this.picked] = result.data.filename;

				
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336


				})



		},

		getmsg:function(data){

			console.log(data);

			this.fid = data;

		},

		//修改课程
		editcourse:function(){

			var lists = [];

			//遍历取值
			for(var key in this.info){

					lists.push({'key':key,'value':this.info[key],'label':this.params[key]});

			}
			console.log(lists);

			//序列化操作
			var lists_str = JSON.stringify(lists);

			console.log(lists_str);


<<<<<<< HEAD
			var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("cid"),price:this.price,state:this.state};
=======
			var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("cid")};
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

			//判断是否有特需参数
			if(lists.length > 0){

<<<<<<< HEAD
				var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("cid"),price:this.price,state:this.state,"params":lists_str};
=======
				var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("cid"),"params":lists_str};
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

			}

			//发送请求
			this.axios.put(
				'http://localhost:5000/updatecourse/',
				this.qs.stringify(data_post)).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('课程修改成功');

					}else{
						this.$toast.fail(result.data.msg);
					}

			});

		},

		//获取课程分类参数
		get_cate:function(fid){

			//判断展示表单
			if(fid === localStorage.getItem("cateid")){

				//选择的分类和默认课程的分类，一致，展示课程回填表单
				this.show_course = true;
				this.show_cate = false;

			}else{

				this.show_course = false;
				this.show_cate = true;

			}

<<<<<<< HEAD
=======
			console.log(this.info);

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

			//发送请求
			this.axios.get(
				'http://localhost:5000/getcate/',{params:{'fid':fid}}).then((result) =>{

					console.log(result);


					//获取参数
					var myparams = result.data.params;

					if(myparams === ""){
						myparams = null;
					}

					//解析
<<<<<<< HEAD
=======

					if(myparams != null){

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
					myparams = JSON.parse(myparams);

					console.log(myparams);

					this.params_cate = myparams;

					//动态生成data对应表单变量

					for(var key in this.params_cate){

							console.log(key);

							//动态声明
							this.$set(this.info_cate,key,'');

					}

<<<<<<< HEAD
					console.log(this.info_cate);
=======
					}

					//console.log(this.info_cate);
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

					



			});



		},
<<<<<<< HEAD
=======

		//封装，解析字符串
		myparse:function(mystr){


			//获取参数
			var myparams = mystr;

			if(myparams === ""){
				myparams = null;
			}

			//解析
			myparams = JSON.parse(myparams);

			return myparams;

		},
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		//获取数据
		get_data:function(){


			//发送请求
			this.axios.get(
				'http://localhost:5000/catelist/').then((result) =>{

					console.log(result);

					// 声明根节点
					var mytree = {'id':0,name:""};

					mytree['children'] = result.data;

					mytree['cid'] = 15;
					this.mydata = mytree;

					console.log(this.mydata);


			});

			//获取课程详情
			this.axios.get(
				'http://localhost:5000/getcourse/',{

					params:{

						fid:this.cid,
						token:localStorage.getItem("token")
					}

				}).then((result) =>{

					console.log(result);

					//赋值操作
					this.title = result.data.title;
					this.desc = result.data.desc;
					this.fid = result.data.cid;
<<<<<<< HEAD
					this.price = result.data.price;
					this.state = result.data.state;

					//转换视频数据类型  将字符串转换为可用类型
					var video_list = JSON.parse(result.data.video);
					this.videoSrc = video_list;
=======
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

					//课程分类id
					localStorage.setItem("cateid",this.fid);


					//获取参数
<<<<<<< HEAD
					var myparams = result.data.params;

					if(myparams === ""){
						myparams = null;
					}

					//解析
					myparams = JSON.parse(myparams);

					console.log(myparams);
=======
					var myparams = this.myparse(result.data.params);

					//解析视频
					var myvideos = this.myparse(result.data.video);

					//赋值操作
					this.videos = myvideos;

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

					this.params = myparams;

					//动态生成data对应表单变量

<<<<<<< HEAD
=======
					if(this.params != null){

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
					for (var i = 0; i < this.params.length; i++) {
					
					//动态声明
					this.$set(this.info,this.params[i]['key'],this.params[i]['value']);

					}

<<<<<<< HEAD
=======
					}

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
					console.log(this.info);

			});


		}
		


	}


}
	


</script>


<style>

ul {

	padding-left:10rem;
	list-style:none;

}

</style>